{% extends 'base.html' %}
      <!--  Modal -->
      {% block header %}
      {% endblock %}
{% load static %}
{% block content %}
{#    ！轮播图！#}
    <div class="container">
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" >
                <div class="carousel-item active" style="width: 100%;height: 500px">
                    <img src="../static/img/轮播1.jpg" class="d-block w-100" style="width:1288px; height:450px;">
                </div>
                <div class="carousel-item" style="width: 100%;height: 500px">
                    <img src="../static/img/轮播2.jpg" class="d-block w-100" style="width:1288px; height:450px;">
                </div>
                <div class="carousel-item" style="width: 100%;height: 500px">
                    <img src="../static/img/轮播3.jpg" class="d-block w-100" style="width:1288px; height:450px;">
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                    data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                    data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </button>
        </div>
{#    ！轮播图！#}
    <header>
            <h2 class="h5 text-uppercase mb-4">热门产品</h2>
          </header>
    {% for goodsdetail in goods_list %}
      <div class="modal fade" id="productView{{ goodsdetail.id }}" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
          <div class="modal-content overflow-hidden border-0">
            <button class="btn-close p-4 position-absolute top-0 end-0 z-index-20 shadow-0" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="modal-body p-0">
              <div class="row align-items-stretch">
                <div class="col-lg-6 p-lg-0"><a class="glightbox product-view d-block h-100 bg-cover bg-center" style="background: url(/{{ goodsdetail.goods_img }})" href="/{{ goodsdetail.goods_img }}" data-gallery="gallery1" data-glightbox="Red digital smartwatch"></a><a class="glightbox d-none" href="/{{ goodsdetail.goods_img }}" data-gallery="gallery1" data-glightbox="Red digital smartwatch"></a><a class="glightbox d-none" href="/{{ goodsdetail.goods_img }}" data-gallery="gallery1" data-glightbox="Red digital smartwatch"></a></div>
                <div class="col-lg-6">
                  <div class="p-4 my-md-4">
                    <ul class="list-inline mb-2">
                      <li class="list-inline-item m-0"><i class="fas fa-star small text-warning"></i></li>
                      <li class="list-inline-item m-0 1"><i class="fas fa-star small text-warning"></i></li>
                      <li class="list-inline-item m-0 2"><i class="fas fa-star small text-warning"></i></li>
                      <li class="list-inline-item m-0 3"><i class="fas fa-star small text-warning"></i></li>
                      <li class="list-inline-item m-0 4"><i class="fas fa-star small text-warning"></i></li>
                    </ul>
{#                      ！小窗商品详情！#}
                    <h2 class="h4">{{ goodsdetail.goods_name }}</h2>
                    <p class="text-muted">${{ goodsdetail.goods_price }}</p>
                    <p class="text-sm mb-4" style="font-weight: bold;">{{ goodsdetail.goods_detail }}</p>
                    <div class="row align-items-stretch mb-4 gx-0">
                      <div class="col-sm-7">
                        <div class="border d-flex align-items-center justify-content-between py-1 px-3"><span class="small text-uppercase text-gray mr-4 no-select">数量</span>

                         <div class="quantity">
                            <button class="dec-btn p-0"><i class="fas fa-caret-left" id="jian"></i></button>
                            <input class="form-control border-0 shadow-0 p-0" type="text" id="quantity" name="quantity" value="1">
                            <button class="inc-btn p-0"><i class="fas fa-caret-right" id="jia"></i></button>
                        </div>

                        </div>
                      </div>
                      <div class="col-sm-5"><a class="btn btn-dark btn-sm w-100 h-100 d-flex align-items-center justify-content-center px-0" href="/cart/zaddcart/{{ goodsdetail.id }}/">加入购物车</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}

          <div class="row">
            {% for goods in goods_list %}
            <!-- PRODUCT1-->
{#                首页商品#}
            <div class="col-xl-3 col-lg-4 col-sm-6">
              <div class="product text-center">
                <div class="position-relative mb-3">
                  <div class="badge text-white bg-"></div><a class="d-block" href="/detail/{{ goods.id }}/"><img class="img-fluid w-100"  src="/{{ goods.goods_img }}" alt="..."></a>
                  <div class="product-overlay">
                    <ul class="mb-0 list-inline">

                      <li class="list-inline-item m-0 p-0"><a class="btn btn-sm btn-dark" href="/cart/zaddcart/{{ goods.id }}/">加入购物车</a></li>
                      <li class="list-inline-item me-0"><a class="btn btn-sm btn-outline-dark" href="#productView{{ goods.id }}" data-bs-toggle="modal"><i class="fas fa-expand"></i></a></li>
                    </ul>
                  </div>
                </div>
                <h6> <a class="reset-anchor" href="/detail/{{ goods.id }}/">{{ goods.goods_name }}</a></h6>
                <p class="small text-muted">${{ goods.goods_price }}</p>
              </div>
            </div>
              {% endfor %}
          </div>

        <!-- SERVICES-->
        <section class="py-5 bg-light">
          <div class="container">
            <div class="row text-center gy-3">
              <div class="col-lg-4">
                <div class="d-inline-block">
                  <div class="d-flex align-items-end">
                    <svg class="svg-icon svg-icon-big svg-icon-light">
                      <use :href="#delivery-time-1"> </use>
                    </svg>
                    <div class="text-start ms-3">
                      <h6 class="text-uppercase mb-1">免费送货</h6>
                      <p class="text-sm mb-0 text-muted">全球免费送货</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="d-inline-block">
                  <div class="d-flex align-items-end">
                    <svg class="svg-icon svg-icon-big svg-icon-light">
                      <use :href="#helpline-24h-1"> </use>
                    </svg>
                    <div class="text-start ms-3">
                      <h6 class="text-uppercase mb-1">24 x 7 服务</h6>
                      <p class="text-sm mb-0 text-muted">全球免费送货</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="d-inline-block">
                  <div class="d-flex align-items-end">
                    <svg class="svg-icon svg-icon-big svg-icon-light">
                      <use :href="#label-tag-1"> </use>
                    </svg>
                    <div class="text-start ms-3">
                      <h6 class="text-uppercase mb-1">节日优惠</h6>
                      <p class="text-sm mb-0 text-muted">全球免费送货</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- NEWSLETTER-->
        <section class="py-5">
          <div class="container p-0">
            <div class="row gy-3">
              <div class="col-lg-6">
                <h5 class="text-uppercase">让我们做朋友吧！</h5>
              </div>
            </div>
          </div>
        </section>
    </div>
     {% endblock %}
{% block footer %}
    <script src="{% static  '/vendor/bootstrap/js/bootstrap.bundle.js' %}"></script>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <script>
    {#轮播图的轮播秒数设置#}
  $(document).ready(function(){
    $('#carouselExampleCaptions').carousel({
      interval: 30000 // 设置为3000毫秒（3秒）自动切换
    });
  });
</script>

{% endblock %}
